<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <script>
    var btnS = document.querySelectorAll('button')
    // 1 使用that保存当前点击对象
    // for (var i = 0; i < btnS.length; i++) {
    //   btnS[i].addEventListener('click', function () {
    //     var that = this;
    //     that.disabled = true;
    //     var num = 5;
    //     var idInte = setInterval(function () {
    //       that.innerText = '等待' + num + '秒'
    //       num--
    //       if (num < 0) {
    //         clearInterval(idInte)
    //         that.innerText = "按钮"
    //         that.disabled = false;
    //       }
    //     }, 1000)

    //   })
    // }


    // 2 使用e.srcElement 或 e.target
    // for (var i = 0; i < btnS.length; i++) {
    //   btnS[i].addEventListener('click', function (e) {
    //     this.disabled = true;
    //     var num = 5;
    //     // console.log(e.target);
    //     // console.log(e.srcElement);
    //     var idInte = setInterval(function () {
    //       e.srcElement.innerText = '等待' + num + '秒'
    //       num--
    //       if (num < 0) {
    //         clearInterval(idInte)
    //         e.srcElement.innerText = "按钮"
    //         e.srcElement.disabled = false;
    //       }
    //     }, 1000)
    //   })
    // }

    //3 bind
    for (var i = 0; i < btnS.length; i++) {
      btnS[i].addEventListener('click', function () {

        this.disabled = true;
        var num = 5;
        var idInte = setInterval(function () {
          // console.log(this);
          this.innerText = '等待' + num + '秒'
          num--
          if (num < 0) {
            clearInterval(idInte)
            this.innerText = "按钮"
            this.disabled = false;
          }
        }.bind(this), 1000)

      })
    }

    // 4 let 块级作用域
    // for (let i = 0; i < btnS.length; i++) {
    //   btnS[i].addEventListener('click', function () {

    //     btnS[i].disabled = true;
    //     var num = 5;
    //     var idInte = setInterval(function () {
    //       // console.log(this);
    //       btnS[i].innerText = '等待' + num + '秒'
    //       num--
    //       if (num < 0) {
    //         clearInterval(idInte)
    //         btnS[i].innerText = "按钮"
    //         btnS[i].disabled = false;
    //       }
    //     }, 1000)

    //   })
    // }

    // 5 箭头函数
    // for (var i = 0; i < btnS.length; i++) {
    //   btnS[i].addEventListener('click', function () {

    //     this.disabled = true;
    //     var num = 5;
    //     var idInte = setInterval(() => {
    //       // console.log(this);
    //       this.innerText = '等待' + num + '秒'
    //       num--
    //       if (num < 0) {
    //         clearInterval(idInte)
    //         this.innerText = "按钮"
    //         this.disabled = false;
    //       }
    //     }, 1000)

    //   })
    // }
  </script>
</body>

</html>